<template>
	<view>
		<view class="container">
			<u-form :model="form" ref="uform" class="sr-form">
				<!-- 图片上传 -->
				<u-upload ref="uUpload" :action="upload.action" :file-list="upload.fileList" :max-count="9"></u-upload>
				<u-form-item label="服务类目" label-position="top" prop="serviceItem" :label-width="150" :required="true">
					<view class="tags">
						<u-tag
							class="tag"
							v-for="(item, index) in serviceItem"
							:key="index"
							:index="index"
							:text="item.text"
							:show="true"
							:bg-color="item.bgcolor"
							:border-color="item.bordercolor"
							color="#ffffff"
							@click="tagclick"
						/>
					</view>
				</u-form-item>
				<u-form-item label="自定义价格" :label-width="150" prop="price">
					<u-input  v-model="form.price" placeholder="请输入自定义价格" />
					<view slot="right"><text decode class="u-main-color">元</text></view>
				</u-form-item>
				<u-form-item label="服务需求" label-position="top" prop="serviceDemand" :label-width="150">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in serviceTypes" :key="index" :name="item.name">
							{{ item.name }}
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item label="城 市" :label-width="150" :required="true">
					<u-input v-model="showcitypickerinput" placeholder="选择城市" @click="showcitypicker = true" disabled="" class="uni-input-input" />
					<city-select v-model="showcitypicker" @city-change="cityChange"></city-select>
				</u-form-item>
				<u-form-item label="详细地址" :label-width="150" :required="true" prop="address">
					<u-input v-model="form.address" placeholder="请输入详细地址" />
				</u-form-item>
				<u-form-item label="联系人姓名" :label-width="150" :required="true" prop="connectName">
					<u-input v-model="form.connectName" placeholder="请输入联系人姓名" />
				</u-form-item>
				<u-form-item label="性别" :label-width="150" :required="true" prop="sex">
					<u-input v-model="sexLabel" type="select" @click="showsex = true" />
					<u-select v-model="showsex" :list="sex.list" @confirm="selectSexCallback"></u-select>
				</u-form-item>
				<u-form-item label="联系人电话" :label-width="150" :required="true" prop="connectTel">
					<u-input v-model="form.connectTel" placeholder="请输入联系人电话" />
				</u-form-item>
				<u-form-item label="其他说明" label-position="top" :label-width="150" prop="state">
					<u-input type="textarea" v-model="form.state" placeholder="其他说明" />
				</u-form-item>
				<!-- <u-form-item label="发布类型" label-position="top" :required="true" class="">
					<u-radio-group v-model="form.pubtype">
						<u-radio v-for="(item, index) in pubtype.list" :key="index" :name="item.value">{{ item.name }}</u-radio>
					</u-radio-group>
				</u-form-item> -->
				
			</u-form>
		</view>
		<view class="bottomarea">
			<view class="addSite">
				<view class="info">预估价格{{getPrice}}</view>
				<view class="add" @tap="pubRequires">发布</view>
			</view>
			<view class="ysxy">
				<u-checkbox-group>
					<u-checkbox style="display: inline-flex;" shape="circle" v-model="ysxy.checked" @change="checkboxChange" name="1">
						<view style="display: flex;">
							我同意
							<router-link style="color:#ff0000" to="{name: privacy}">服务条款</router-link>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		
		<view style="height: 70px;"></view>
		<u-top-tips ref="uTips" style="top:0"></u-top-tips>
	</view>
</template>

<script>
import citySelect from '../common/u-city-select.vue';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			upload: {
				action: 'http://www.mksoft.cn/zx/front/zhuangxiu/uploadHouseImg',
				fileList: []
			},
			ysxy: {
				checked: false
			},
			sexLabel:'男',
			showsex: false,
			sex:{
				list:[
					{ label: '男', value: 1 },{ label: '女', value: 2 }
				]
			},
			showcitypicker: false,
			showcitypickerinput: '',
			price: '0.0',
			serviceItem: [],
			form: {},
			serviceDemad: [],
			serviceTypes: [
				{
					name: '维修',
					checked: false,
					disabled: false
				},
				{
					name: '安装',
					checked: false,
					disabled: false
				},
				{
					name: '测量',
					checked: false,
					disabled: false
				},
				{
					name: '设计',
					checked: false,
					disabled: false
				},
				{
					name: '招聘',
					checked: false,
					disabled: false
				}
			],
			activedIndex: -1,
			form: {
				images:'',
				serviceDemand: '',
				serviceCates: '',
				state: '',
				pubtype:'2',
				province:'',
				city:'',
				district:'',
				address:'',
				connectTel:'',
				connectName:'',
				sex:'1',
				price:''
			},
			pubtype:{
				list:[
					{
						value:"1",
						name:'直接下单'
					},
					{
						value:"2",
						name:'发送给本地所有师傅'
					}
				]
			}
		};
	},
	computed:{
		getPrice(){
			if(this.form.price){
				return '￥' + this.form.price;
			}else{
				return '';
			}
		}
	},
	methods: {
		selectSexCallback(e){
			this.sexLabel = e[0].label;
			this.form.sex = e[0].value;
		},
		cityChange(e) {
			console.log(e);
			this.showcitypickerinput = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.form.province = e.province.value;
			this.form.city = e.city.value;
			this.form.district = e.area.value; 
		},
		getResult() {
			return this.serviceDemad.join(',');
		},
		checkboxChange(e) {},
		checkboxGroupChange(e) {
			this.serviceDemad = e;
		},
		getServiceTypes() {
			uni.request({
				url: 'http://www.mksoft.cn/zx/front/mer/getServiceTypes',
				success: res => {
					if (res.data.code == 200) {
						let arry = res.data.data;
						this.serviceItem = arry.map(function(item, index, arry) {
							let o = {
								text: item.name,
								key: item.id,
								price: item.price,
								selected: false,
								bgcolor: '#b0b0b0',
								bordercolor: '#b0b0b0'
							};
							return o;
						});
						// 初始化选中的服务类
						this.initServiceType();
					}
				},
				fail: res => {}
			});
		},
		tagclick(index) {
			if (this.activedIndex > -1) {
				this.serviceItem[this.activedIndex].selected = false;
				this.serviceItem[this.activedIndex].bgcolor = '#b0b0b0';
				this.serviceItem[this.activedIndex].bordercolor = '#b0b0b0';
			}
			this.activedIndex = index;
			if (!this.serviceItem[index].selected) {
				// 选中
				this.serviceItem[index].selected = true;
				this.serviceItem[index].bgcolor = '#FA8513';
				this.serviceItem[index].bordercolor = '#FA8513';
			} else {
				// 取消选中
				this.serviceItem[index].selected = false;
				this.serviceItem[index].bgcolor = '#b0b0b0';
				this.serviceItem[index].bordercolor = '#b0b0b0';
			}
		},
		initServiceType(){
			this.activedIndex = this.$Route.query.index;
			if(this.activedIndex && this.activedIndex>-1){
				this.serviceItem[this.activedIndex].selected = true;
				this.serviceItem[this.activedIndex].bgcolor = '#FA8513';
				this.serviceItem[this.activedIndex].bordercolor = '#FA8513';
			}
		},
		pubRequires() {
			 let files = this.$refs.uUpload.lists.filter(val => {
			 	return val.progress == 100;
			 });
			 let fileStr = '';
			 for (let i = 0; i < files.length; i++) {
			 	fileStr += files[i].response.data + ',';
			 }
			 //去掉最后一个逗号(如果不需要去掉，就不用写)
			 if (fileStr.length > 0) {
			 	fileStr = fileStr.substr(0, fileStr.length - 1);
			 }
			 this.form.images = fileStr;
			if ( this.activedIndex < 0) {
				this.$refs.uTips.show({
					title: "请选择服务类目",
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			if(!this.showcitypickerinput){
				this.$refs.uTips.show({
					title: "请选择城市",
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			if(!this.form.address){
				this.$refs.uTips.show({
					title: "请输入详细地址",
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			if(!this.form.connectName){
				this.$refs.uTips.show({
					title: "请输入联系人姓名",
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			// 判断是否勾选隐私协议
			if (!this.ysxy.checked) {
				this.$refs.uTips.show({
					title: "请勾选服务条款",
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			let res = this.getResult();
			let serviceTypeId = this.serviceItem[this.activedIndex].key;
			this.$u
				.post('/front/business/publishSericeRequire', {
					serviceTypeId: serviceTypeId,
					serviceDemad: res,
					state: this.form.state,
					province: this.form.province,
					city: this.form.city,
					district: this.form.district,
					address : this.showcitypickerinput+'-'+this.form.address,
					connectTel: this.form.connectTel,
					connectName: this.form.connectName,
					sex: this.form.sex,
					price:this.form.price || this.serviceItem[this.activedIndex].price || 0.0,
					images:this.form.images
				})
				.then(res => {
					if (res.code == 200) {
						this.$refs.uTips.show({
							title: '发布成功',
							type: 'success',
							duration: '2300'
						});
					} else {
						this.$refs.uTips.show({
							title: res.msg,
							type: 'warning',
							duration: '2300'
						});
					}
				});
		}
	},
	onLoad() {
		// 查询所有服务分类
		this.getServiceTypes();
	}
};
</script>

<style lang="scss">
.container {
	padding:30upx;
	.tag {
		margin-left: 20upx;
	}
	.sr-form {
		margin-bottom: 20rpx;
	}
}
.bottomarea{
	
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
}
.ysxy{
	height:50rpx;
	line-height: 50rpx;
	color:#e1e1e1;
	font-size: 9px;
	display: flex;
	justify-content: center;
	background-color: #ffff;
}
.addSite {
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid #ebebeb;
	font-size: 30rpx;
	line-height: 100rpx;
	display: flex;
	.info {
		flex-grow: 2;
		text-align: center;
		background-color: #ffff;
	}
	.add {
		background-color: #fa8513;
		color: #ffffff;
		width: 300upx;
		text-align: center;
	}
}
</style>
